<template>
    <!-- html结构 -->
    <div class="person">
        <!-- 双向绑定用v-model ，而不是v-bind:value="name" -->
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{{fullName}}</span><br>
        全名：<span>{{fullName}}</span><br>
        全名：<span>{{fullName}}</span><br>
        <button @click="changeName">修改全名</button>
    </div>
</template>
<script setup lang="ts" name="Person">

import { computed, ref } from 'vue';

let firstName = ref('zhang');
let lastName = ref('三');
// 计算属性计较聪明，重复计算的数据只会计算一次，有缓存,结果也是个响应式数据
// 当前为只读的，不能修改，要用get，set
// 而鸿蒙和react里面computed是可读，只要写在里面的逻辑用的参数都会有缓存
// 也就是如果逻辑里面的值发生变化，那么计算属性就会重新计算，否则可以直接用

//  let fullName=computed(()=>{
//     return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value;
//  })

let fullName=computed({
    get(){
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value;
    },
    set(val){
         // 解构赋值
    let [str1,str2]=val.split('-');
        // console.log('set',val);
        firstName.value=str1;
        lastName.value=str2;
        
    }
})
function changeName(){
   
    fullName.value='li-si';
}

</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>